<template>
  <div id="index">
   
    <div class="swiper">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" style="width:100%;" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="search-input">
      <Search placeholder="请输入商品名称" v-model="value" background="#fff"/>
    </div>
     <van-row class="index-panel">
         <van-panel title="标题" >
      <div style="padding:0.4rem 0.2rem">      
            <van-row class="user-links">
          <van-col span="8" class="links">
            <div>
              <van-icon name="pending-payment" />
            </div>
             待付款
          </van-col>
          <van-col span="8" class="links">
            <van-icon name="pending-orders" /> 待接单
          </van-col>
          <van-col span="8" class="links">
            <van-icon name="pending-deliver" /> 待发货
          </van-col>
        </van-row>
        <van-row class="user-links">
      <van-col span="8" class="links">
        <van-icon name="pending-payment" /> 待付款
      </van-col>
      <van-col span="8" class="links">
        <van-icon name="pending-orders" /> 待接单
      </van-col>
      <van-col span="8" class="links">
        <van-icon name="pending-deliver" /> 待发货
      </van-col>

    </van-row>
      </div>      
      </van-panel>
     </van-row>    
    <van-row style="background:#fff;">
      <van-tabs v-model="active">
        <van-tab title="热门">
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <van-row class="goods-list" v-for="item in list" :key="item">
              <van-col span="12" class="goods-item" >
                <div class="goods" @click="goDetail" data-id="22">
                  <div class="goods-image" v-lazy:background-image="'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'"></div>
                  <div class="goods-title">
                    底图不重复的问题。但另一个问题来了，图片是按宽度作为比例进行缩放的，如果这张图是横向，在手机竖向时，下面一截就空了，如下图
                  </div>
                   <div class="goods-desc">
                    <van-col span="24" class="goods-tags">
                      <van-tag type="danger">标签</van-tag>
                      <van-tag type="danger">标签</van-tag>
                      <van-tag type="danger">标签</van-tag>
                    </van-col>
                  </div>
                  <div class="goods-desc">
                    <van-col span="14" class="goods-tags">
                      已售200
                    </van-col>
                    <van-col span="10" class="goods-price">
                      ￥256/月
                    </van-col>
                  </div>
                </div>
              </van-col>
              <van-col span="12" class="goods-item" >
                <div class="goods" @click="goDetail" data-id="22">
                  <div class="goods-image" v-lazy:background-image="'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'"></div>
                  <div class="goods-title">
                    底图不重复的问题。但另一个问题来了，图片是按宽度作为比例进行缩放的，如果这张图是横向，在手机竖向时，下面一截就空了，如下图
                  </div>
                  <div class="goods-desc">
                    <van-col span="24" class="goods-tags">
                      <van-tag type="danger">标签</van-tag>
                      <van-tag type="danger">标签</van-tag>
                      <van-tag type="danger">标签</van-tag>
                    </van-col>
                  </div>
                  <div class="goods-desc">
                    <van-col span="14" class="goods-tags">
                      已售200
                    </van-col>
                    <van-col span="10" class="goods-price">
                      ￥256/月
                    </van-col>
                  </div>
                </div>
              </van-col>
            </van-row>
          </van-list>
        </van-tab>
        <van-tab title="最新">
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <van-cell v-for="item in list" :key="item" :title="item + ''" />
          </van-list>
        </van-tab>
      </van-tabs>
    </van-row>
  </div>
</template>

<script>
import Vue from 'vue';
import { Search, Row, Col, Cell, Icon, CellGroup, Swipe, SwipeItem, Lazyload, Tab, Tabs, List, Tag, Toast, Panel } from 'vant';
Vue.use(Lazyload, {
  preLoad: 1.3
});
export default {
  components: {
    Search,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [Tag.name]: Tag,
    [Panel.name]: Panel
  },
  data () {
    return {
      value: "",
      list: [],
      loading: false,
      finished: false,
      active: 0,
      images: [
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'        
      ]
    }

  },
  mounted () {
    this.$store.dispatch('header/setHeader', { title: "测试页面", clickLeft: this.goBack, opacity: 0.5 })
  },
  methods: {
    goBack () {
      console.log('ss')
      this.$toast('提示文案');
    },
    goDetail (event) {
      console.log(event.currentTarget.dataset.id)
      this.$router.push({ "path": "/goodsDetail" })
    },
    onLoad () {
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    }
  }
}

</script>

<style lang="less" scoped>
.search-input{
  margin: 0.3rem 0;
  background: #fff;
}

.user-links {
  font-size: 0.78rem;
  text-align: center;
  background-color: #fff;
  .links {
    border: 1px solid #e3e3e3;
    height: 5rem;
    padding: 1rem 0;
    line-height: 2rem;
    text-align: center;
    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}

.goods-list {
  .goods-item {
    //height: 14rem;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    // margin-bottom: 0.25rem;
    .goods {
      border: 1px solid #e3e3e3;
      padding: 0.25rem;
      .goods-image {
        height: 8rem;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .goods-title {
        height: 2rem;
        line-height: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        letter-spacing: 0.05rem;
        margin: 0.25rem 0;
      }
      .goods-desc {
        height: 1rem;
        line-height: 1rem;
        margin: 0.25rem 0;
        .goods-tags {
          overflow: hidden;
          text-align: left;
          height: 1rem;
        }
        .goods-price {
          text-align: right;
          color: red;
        }
      }
    }
  }
  .goods-item:nth-child(2n) {
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  }
  .goods-item:nth-child(2n + 1) {
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  }
}
</style>
